<template>
  <view class="wrapper">
    <view class="container">
      <ZTInput label="上报人姓名" v-model="name" />
      <ZTInput label="上报人身份证" v-model="idCard" :maxlength="18" />
      <ZTInput label="手机号码" v-model="phone" type="number" :maxlength="11" />
      <ZTInput label="供土原因" v-model="reason" />
      <ZTPickerTime label="清运时间" :date="time" @change="bindDateChange" />
      <ZTPickerRange
        label="土质类型"
        :range="typeList"
        :value="soilType"
        @change="bindPickerChange"
      />
      <ZTInput label="出土方量" v-model="soilNum" />
      <ZTLocation label="出土位置" v-model="address" @change="handleLocation" />
      <ZTTextarea label="出土描述" v-model="describe" :maxlength="200" />
      <ZTUploader label="产权证明" :src="cover" @change="handleChooseCover" />
    </view>

    <view class="footer">
      <button class="btn" @click="submit">提交</button>
    </view>
  </view>
</template>

<script>
import { addDecoration } from '@/api';
import ZTInput from '@/components/ZTInput/index.vue';
import ZTPickerTime from '@/components/ZTPickerTime/index.vue';
import ZTPickerRange from '@/components/ZTPickerRange/index.vue';
import ZTLocation from '@/components/ZTLocation/index.vue';
import ZTTextarea from '@/components/ZTTextarea/index.vue';
import ZTUploader from '@/components/ZTUploader/index.vue';
export default {
  components: { ZTInput, ZTPickerTime, ZTPickerRange, ZTLocation, ZTTextarea, ZTUploader },

  data() {
    const currentDate = this.getDate();
    return {
      typeList: [{ label: '装修垃圾', value: '3' }],
      name: '', // 姓名
      idCard: '', // 身份证号
      phone: '', // 手机号
      reason: '', // 供土原因
      time: currentDate, // 清运时间
      soilType: '3', // 出土类型
      soilNum: '', // 出土方量
      address: '', // 出土位置
      gis: '', // 出土位置坐标
    };
  },

  onLoad() {},

  methods: {
    bindPickerChange(e) {
      this.typeIndex = e;
    },

    bindDateChange(e) {
      this.time = e;
    },

    handleLocation(e) {
      this.address = e.address;
      this.gis = `${e.longitude},${e.latitude}`;
    },

    handleChooseCover(e) {
      this.cover = e;
    },

    getDate() {
      const date = new Date();
      const year = date.getFullYear();
      let month = date.getMonth() + 1;
      let day = date.getDate();

      month = month > 9 ? month : '0' + month;
      day = day > 9 ? day : '0' + day;
      return `${year}-${month}-${day} 00:00:00`;
    },

    submit() {
      const params = {
        name: this.name, // 姓名
        idCard: this.idCard, // 身份证号
        phone: this.phone, // 手机号
        reason: this.reason, // 供土原因
        time: this.time, // 清运时间
        soilType: this.soilType, // 出土类型
        soilNum: this.soilNum, // 出土方量
        address: this.address, // 出土位置
        gis: this.gis, // 出土位置坐标
      };

      addDecoration(params).then(() => {
        uni.showToast({ title: '添加成功', icon: 'none' });
        setTimeout(() => {
          uni.redirectTo({
            url: '/pages/chutuList/index',
          });
        }, 2000);
      });
    },
  },
};
</script>

<style lang="less" scoped>
.wrapper {
  padding-bottom: calc(30rpx + 100rpx + 30rpx + env(safe-area-inset-bottom));
  box-sizing: border-box;
}
</style>
